<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border-width: 30px;
            border-style: solid;
            border-color: red;

            border: 30px solid green;

            border-width: 30px 40px 50px 60px;      
            border-style: solid;
            border-color: red;

            width: 300px;
            height: 100px;
        }

        span {
            /* display: block; */
            border: solid;

            width: 300px;
            height: 100px;
            display: block;

        }

        /* 假设是一个行内元素，他刚开始虽然设置宽高没有用但是他记录下来了，后面display把他变为块级元素
        ，此时之前记录的宽高就有用了，所以不论先设置块级还是宽高都一样是吗
        是的，你的理解完全正确！对于一个元素，无论先设置 width/height 还是先设置 display: block，
        最终只要元素被设置为块级元素（或 inline-block 等支持宽高的类型），之前定义的宽高就会生效。原因是：
        CSS 解析时会记录所有属性的最终值，而属性的生效条件（如宽高是否有效）取决于元素最终的显示类型（display 值），与定义顺序无关。 */
    </style>
</head>

<body>
    <div class="text1">我是⽂本1</div>
    <span>这是一个span</span>
</body>

</html>